<template>
	<s-layout title="标题" navbar="normal1">
		<view class="navbar">
			<view class="navbar-placeholder"  :style="{ height : navHeight + 'px'}"/>
			<view class="navbar-center" 
				:style="{paddingTop:sheep.$platform.device.statusBarHeight + 'px',
					height : navHeight + 'px'}">
				<view class="ss-flex w-100" style="height: 44px;">
					<view class="ss-flex-1 ss-flex ss-row-between ss-p-x-20 w-100">
						<view class="leftBox ss-flex">
							<view class="leftBox-title ss-flex" @click="onClickLeft">
								<image class="leftBox-icon" src="/static/tuangou/left.png" mode="aspectFill" />
								<view v-if="!state.navRetract" >
									团购
								</view>
							</view>
							<view class="leftBox-location ss-flex ss-m-l-16" v-if="!state.navRetract" 
								@click="onchangeArea">
								<uni-icons type="location-filled" size="18" color="#585858" />
								<view class="location-name">{{ state.params.area }}</view>
								<image class="location-icon" src="/static/tuangou/right.png" mode="aspectFill" />
							</view>
						</view>
						<view class="rightBox ss-flex" @click="openOrder" v-if="!state.navRetract">
							<image class="rightBox-icon" src="/static/tuangou/order.png" mode="aspectFill" />
							订单
						</view>
						<view class="search ss-flex-1" v-if="state.navRetract">
							<view class="city" @click="onchangeArea">
								<view class="city_name">{{ state.params.area }}</view>
								<image class="down" src="/icon/down.png" mode="aspectFill" />
							</view>
							<view class="line"></view>
							<input type="text" class="keyword" @confirm="inputSearch" v-model="state.params.keyword"
								placeholder="搜索本地生活店铺" />
							<view class="search_btn" @click="onSearch">搜索</view>
						</view>
					</view>
					<!-- #ifdef MP -->
					<view v-if="!sheep.$platform.inPc" :style="[capsuleStyle]"></view>
					<!-- #endif -->
					<view v-if="sheep.$platform.inApp" :style="[capsuleStyle]"></view>
				</view>
				<view class="search ss-m-x-30" v-if="!state.navRetract">
					<view class="city" @click="onchangeArea">
						<view class="city_name">{{ state.params.area }}</view>
						<image class="down" src="/icon/down.png" mode="aspectFill" />
					</view>
					<view class="line"></view>
					<input type="text" class="keyword" @confirm="inputSearch" v-model="state.params.keyword"
						placeholder="搜索本地生活店铺" />
					<view class="search_btn" @click="onSearch">搜索</view>
				</view>
				<scroll-view scroll-x class="menuList">
					<view class="menuList-item ss-flex-col ss-col-center" v-for="i in 8" :key="i">
						<image class="menuList-img" v-if="!state.navRetract" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/static/home/swiper-btns/A2.png"  />
						<view class="menuList-title">
							美食
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content">
			<view class="tejiatuan">
				<view class="tejiatuan-title ss-flex">
					<image class="icon" src="/static/tuangou/tejiatuan.png" mode="widthFix" />
					<view class="heat">
						低价热抢中
					</view>
				</view>
				<view class="tejiatuan-goodsBox ss-flex ss-flex-wrap">
					<view class="goodsBox-item ss-flex" v-for="i in 4" :key="i">
						<image class="item-img" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250320/0059e29ddd0926be6c4814561ef00408.png" />
						<view class
						="item-right ss-flex-col ss-row-between">
							<view class="item-right-title ss-line-2">
								商家名称 产品名称产品名称产品名称产品名称产品名称
							</view>
							<view class="item-right-price ss-flex ss-col-bottom">
								￥9.11
								<view class="price-line">
									￥6.11
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<cDropMenu :data="state.dropMenu" @change="dropMenuChange">
				<cGroupCard :data="item" v-for="item in state.list" :key="item.id" />
				<uni-load-more
				  v-if="state.list.length > 0"
				  :status="state.more"
				  :content-text="{
					contentdown: '上拉加载更多',
				  }"
				  @tap="loadmore"
				/>
				<s-empty v-if="state.list.length == 0" icon="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/mengchong/soldout-empty.png" text="暂无数据">
				</s-empty>
			</cDropMenu>
			
			<view style="height: 100vh;">
				
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import cDropMenu from "@/components/c-drop-menu.vue"
	import cGroupCard from "./components/c-group-card.vue"
	import { ref, reactive, computed, nextTick } from 'vue'
	import { onLoad, onShow, onHide,onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	const state = reactive({
		navRetract:false,
		data: {},
		list: [
			{
				id:'1',
				shopName:'商家名',
				groupName:'产品名称',
				image:'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250320/0059e29ddd0926be6c4814561ef00408.png',
				salesVolume:4100,
				service:['随时退','过期退','专属客服'],
				price:12.9,
				distance:'100米',
				
			}
		],
		more:'more',
		params: {
			area: '杭州市',
			longitude: '',
			latitude: '',
			keyword: '',
		},
		dropMenu:[
			{
				label:'附近',
				key:'near',
				value:'',
				children:[
					{ label:'全部', value:'', },
					{ label:'500m', value:'500', },
					{ label:'1km', value:'1000', },
					{ label:'2km', value:'2000', },
					{ label:'5km', value:'5000', },
					{ label:'≥5km', value:'5000+', },
				]
			},
			{
				label:'智能排序',
				key:'sort',
				value:'',
				children:[
					{ label:'最近距离', value:'distance', },
				]
			},
			{
				label:'必吃套餐',
				key:'recommend',
				value:'1',
				children:[]
			},
			{
				label:'高分店',
				key:'highScore',
				value:'1',
				children:[]
			}
		]
	})
	const navHeight = computed(()=>{
		if(state.navRetract){
			return sheep.$platform.device.statusBarHeight + 44 + uni.rpx2px(60)
		}else{
			return sheep.$platform.device.statusBarHeight + 44 + uni.rpx2px(80) + uni.rpx2px(128)
		}
	})
	onLoad((opt) => {

	})
	onPageScroll((e)=>{
		if (e.scrollTop >= 60) {
		  state.navRetract = true;
		} else {
		  state.navRetract = false;
		}
	})
	onPullDownRefresh(() => {
		setTimeout(() => {
			uni.stopPullDownRefresh()
		})
	})
	const hasHistory = sheep.$router.hasHistory();
	function onClickLeft() {
		if (hasHistory) {
			sheep.$router.back();
		} else {
			sheep.$router.go('/pages/index/home');
		}
	}
	function dropMenuChange(e){
		console.log("dropMenuChange",e)
	}
	function loadmore(){
		
	}
	function inputSearch() {

	}

	function onSearch() {
		
	}

	function openOrder() {
		sheep.$router.go('/pages/order/list')
	}
	const capsuleStyle = computed(() => {
		return {
			width: sheep.$platform.capsule.width + 'px',
			minWidth: sheep.$platform.capsule.width + 'px',
			height: sheep.$platform.capsule.height + 'px',
			margin: '0 ' + (sheep.$platform.device.windowWidth - sheep.$platform.capsule.right) + 'px 0 0',
		};
	});

	function changeAddress() {
		if (uni.getStorageSync('location')) {
			state.location = JSON.parse(uni.getStorageSync('location'));
			state.params.area = state.location.city_name;
			state.params.longitude = state.location.lon;
			state.params.latitude = state.location.lat;
		}
	};
	// 切换城市
	function onchangeArea() {
		// #ifdef APP
		if (sheep.$store('permission').locate === 1) {
			// #endif
			uni.navigateTo({
				url: '/pages/etc/chooseArea',
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					acceptDataFromOpenedPage: function(data) {
						changeAddress();
					},
				},
				success: function(res) {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('acceptDataFromOpenerPage', {});
				},
			});
			// #ifdef APP
		}
		// #endif
	};
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	
	.navbar {
		background-color: #fff;


		.navbar-placeholder {
		}

		.navbar-center {
			width: 100vw;
			max-width: 100vw;
			position: fixed;
			top: 0;
			z-index: 100;
			background-color: #fff;
			.leftBox {
				padding-left: 14rpx;

				.leftBox-icon {
					width: 14rpx;
					height: 37rpx;
					margin-right: 20rpx;
					vertical-align: middle;
				}

				.leftBox-title {
					font-size: 36rpx;
					font-weight: 500;
					line-height: normal;
					text-align: center;
					color: #000000;
				}

				.leftBox-location {
					.location-name {
						font-size: 26rpx;
						font-weight: 500;
						line-height: normal;
						text-align: center;
						color: #2C2C2C;
					}

					.location-icon {
						margin-left: 6rpx;
						width: 24rpx;
						height: 24rpx;
						vertical-align: middle;
					}
				}
			}

			.rightBox {
				padding-right: 14rpx;

				.rightBox-icon {
					margin-right: 4rpx;
					width: 24rpx;
					height: 24rpx;
					vertical-align: middle;
				}

				font-size: 26rpx;
				font-weight: 500;
				line-height: normal;
				text-align: center;
				color: #2C2C2C;
			}
		}
	}
	.search {
		width: calc(100% - 60rpx);
		height: 63rpx;
		border-radius: 50rpx;
		display: flex;
		padding-left: 20rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #EfEfEf;

		.city {
			display: flex;
			align-items: center;
			width: 130rpx;
			padding: 0 20rpx 0 0;
			// background-color: aqua;
			justify-content: space-between;

			.city_name {
				color: #000000;
				font-weight: 500;
				font-size: 26rpx;
				width: 120rpx;
				text-align: center;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
			}

			.down {
				width: 18rpx;
				height: 12rpx;
			}
		}

		.line {
			width: 4rpx;
			height: 40rpx;
			background-color: #e9e9e9;
		}

		.keyword {
			font-size: 24rpx;
			flex: 1;
			height: 44rpx;
			font-weight: 500;
			color: #999999;
			margin-left: 20rpx;
		}

		.search_btn {
			padding: 8rpx 25rpx;
			margin-right: 8rpx;
			color: #fff;
			font-size: 24rpx;
			border-radius: 999em;
			background-color: #006cd9;
		}
	}
	.menuList{
		width: 100vw;
		white-space: nowrap;
		.menuList-item{
			display: inline-block;
			width: 124rpx;
			padding:0 calc((124rpx - 78rpx) * 0.5 );
			.menuList-img{
				margin-top: 10rpx;
				width: 78rpx;
				height: 78rpx;
			}
			.menuList-title{
				width: 100%;
				margin-top: 5rpx;
				font-size: 24rpx;
				font-weight: normal;
				line-height: normal;
				text-align: center;
				color: #666;
			}
		
		}
	}
	.content {
		.tejiatuan{
			margin-top: 20rpx;
			width: 100%;
			padding: 0 10rpx;
			.tejiatuan-title{
				padding: 0 24rpx;
				height: 24rpx;
				.icon{
					width: 100rpx;
					height: 28rpx;
				}
				.heat{
					margin-left: 10rpx;
					height: 26rpx;
					border-radius: 10rpx;
					padding: 0 10rpx;
					background: linear-gradient(271deg, #FF3636 2%, #F6ADAD 113%);
					font-size: 18rpx;
					font-weight: normal;
					line-height: 24rpx;
					text-align: center;
					color: #F4EDED;
				}
			}
			.tejiatuan-goodsBox{
				width: 100%;
				.goodsBox-item{
					width: 50%;
					margin-top: 20rpx;
					padding: 0 20rpx;
					.item-img{
						width: 123rpx;
						height: 101rpx;
						min-width: 123rpx;
						margin-right: 14rpx;
						border-radius: 10rpx;
					}
					.item-right{
						height: 101rpx;
						.item-right-title{
							font-size: 24rpx;
							font-weight: 500;
							color: #000000;
						}
						.item-right-price{
							font-size: 24rpx;
							font-weight: 500;
							color: #F6481E;
							.price-line{
								text-decoration: line-through;
								font-size: 18rpx;
								font-weight: 500;
								color: #BFBFBF;
							}
						}
					}
				}
			}
		}
	}
</style>